<template>
    <div class="add_weekend_container">

        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>产品</el-breadcrumb-item>
            <el-breadcrumb-item>周末趣那管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加周末趣那</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="add_weekend_card">
            <el-row class="title">
                <el-col>添加流程</el-col>
            </el-row>

            <div class="steps">
                <el-steps align-center :active="active" finish-status="success">
                    <el-step title="基本信息"></el-step>
                    <el-step title="每日活动"></el-step>
                    <el-step title="填写价格"></el-step>
                </el-steps>
            </div>
        </el-card>

        <!-- 底部按钮 -->
        <div class="Auditing">
            <div class="left">
                <span class="my_icon">!</span>
                <span class="text">提交前请仔细检查各项信息！</span>
            </div>
            <div class="right">
                <el-button @click="back()">返回</el-button>
                <el-button @click="first('ruleForm')" type="primary" v-if="active === 0">下一步</el-button>
                <el-button @click="seconds('ruleSecond')" type="primary" v-if="active === 1">下一步</el-button>
                <el-button @click="third_add()" type="primary" v-if="active === 2">完成</el-button>
            </div>
        </div>

        <!--第一页-->
        <div v-if="active === 0" class="container">
            <el-card class="add_weekend_card">
                <el-row class="title">
                    <el-col>基本信息</el-col>
                </el-row>
                <!-- 主体内容 -->
                <div class="content">
                    <!-- 二维码 -->
                    <!--<div class="code_box">-->
                    <!--<div class="code">小程序码</div>-->
                    <!--<span>手机扫描小程序码进行预览</span>-->
                    <!--</div>-->
                    <!-- 表单 -->
                    <el-form class="essential_information_form" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                        <el-form-item label="商品名称：" prop="title">
                            <el-input placeholder="请输入商品名称" class="width550" v-model="ruleForm.title"></el-input>
                        </el-form-item>

                        <el-form-item label="副标题：" prop="subtitle">
                            <el-input placeholder="请输入副标题" class="width550" v-model="ruleForm.subtitle"></el-input>
                        </el-form-item>

                        <el-form-item label="编码：" prop="sn">
                            <el-input placeholder="请输入编码" class="width380" v-model="ruleForm.sn"></el-input>
                        </el-form-item>

                        <el-form-item label="需要护照：">
                            <el-radio v-model="ruleForm.radio" label="2">否</el-radio>
                            <el-radio v-model="ruleForm.radio" label="1">是</el-radio>
                        </el-form-item>

                        <el-form-item label="展示图片:">
                            <el-upload action="http://up-z2.qiniup.com" :file-list="imgList" list-type="picture-card" :on-preview="descPictureCardPreview" :on-remove="descRemove" :on-success="descAvatarSuccess" :on-error="descError" :on-exceed="descExceed" :data="postData">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <!--<p class="disc">图片尺寸100 X 100</p>-->
                            <el-dialog :visible.sync="desc_img">
                                <img class="img" :src="descImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>

                        <el-form-item label="原价 (元) :" prop="cost_price">
                            <el-input placeholder="请输入原价" class="width380" v-model="ruleForm.cost_price"></el-input>
                        </el-form-item>

                        <el-form-item label="标签：">
                            <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
                                {{tag}}
                            </el-tag>

                            <el-input class="input-new-tag" v-if="inputVisible" maxlength="4" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                            </el-input>

                            <el-button v-if="inputVisible === false" size="small" @click="showInput">+ 添加新标签</el-button>
                            <p class="disc">最多添加四个标签,每个标签四个字</p>
                        </el-form-item>

                        <el-form-item label="产品介绍：">
                            <el-input type="textarea" rows="6" class="big_texteara" placeholder="请输入产品介绍" v-model="ruleForm.content"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="line"></div>
                    <el-row class="TrafficInfo_row">
                        <el-col>
                            <span class="TrafficInfo_text">交通信息:</span>
                            <el-switch v-model="traffic_switch">
                            </el-switch>
                        </el-col>
                    </el-row>

                    <!--交通信息-->
                    <el-table :data="traffic_table_data" v-if="traffic_switch === true" border style="width: 100%">
                        <el-table-column prop="go_date" label="日期">
                        </el-table-column>
                        <el-table-column prop="place" label="出发地-目的地">
                        </el-table-column>

                        <el-table-column prop="flight" label="班次">
                        </el-table-column>

                        <el-table-column prop="go_time" label="出发时间">
                        </el-table-column>

                        <el-table-column prop="go_place" label="出发地点">
                        </el-table-column>

                        <el-table-column prop="return_time" label="到达时间">
                        </el-table-column>

                        <el-table-column prop="return_place" label="到达地点">
                        </el-table-column>

                        <el-table-column prop="desc" label="行程时长">
                        </el-table-column>

                        <el-table-column label="操作" width="200">
                            <div class="operation" slot-scope="scope">
                                <span class="edit" style="cursor: pointer" @click="showTraffic(scope.row.id)">编辑</span>
                                <!--<span class="del">移除</span>-->
                            </div>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>

            <!--购买须知-->
            <el-card class="add_weekend_card">
                <!-- title -->
                <el-row class="title">
                    <el-col>购买须知</el-col>
                </el-row>
                <!-- 主体内容 -->
                <div class="content">
                    <el-form class="notice_form" :inline="true">
                        <el-form-item label="人群须知：">
                            <el-input type="textarea" rows="6" class="notice_text" placeholder="请输入人群须知" v-model="ruleForm.crowd_notice"></el-input>
                        </el-form-item>

                        <el-form-item label="使用方法：">
                            <el-input type="textarea" rows="6" class="notice_text" placeholder="请输入使用方法" v-model="ruleForm.use_mode"></el-input>
                        </el-form-item>

                        <el-form-item label="注意事项：">
                            <el-input type="textarea" rows="6" class="notice_text" placeholder="请输入注意事项" v-model="ruleForm.matter_con"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>

            <!--费用说明-->
            <el-card class="add_weekend_card">
                <!-- title -->
                <el-row class="title">
                    <el-col>费用说明</el-col>
                </el-row>

                <!-- 主体内容 -->
                <div class="content">
                    <el-form class="notice_form" :inline="true">

                        <el-form-item label="费用包含：">
                            <el-input type="textarea" rows="6" class="notice_text" placeholder="请输入费用包含的内容" v-model="ruleForm.cost_contain"></el-input>
                        </el-form-item>

                        <el-form-item label="费用不含：">
                            <el-input type="textarea" rows="6" class="notice_text" placeholder="请输入费用不含的内容" v-model="ruleForm.cost_exclusive"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>

            <!--交通信息弹窗-->
            <el-dialog close="el-dialog" title="添加交通信息" :visible.sync="traffic_dialogVisible" width="40%" :before-close="closeTraffic">
                <!-- 表单 -->
                <el-form :model="traffic_Form" :rules="traffic_rules" ref="traffic_Form" label-width="100px">
                    <el-form-item label="日期：:" prop="go_date">
                        <el-date-picker v-model="traffic_Form.go_date" type="date" placeholder="选择日期" style="width: 90%;">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="班次：" prop="flight">
                        <el-input style="width: 90%;" placeholder="请输入班次" v-model="traffic_Form.flight"></el-input>
                    </el-form-item>
                    <el-form-item label="出发地：" prop="go_city">
                        <el-input style="width: 90%;" placeholder="请输入出发城市" v-model="traffic_Form.go_city"></el-input>
                    </el-form-item>
                    <el-form-item label="目的地：" prop="return_city">
                        <el-input style="width: 90%;" placeholder="请输入到达城市" v-model="traffic_Form.return_city"></el-input>
                    </el-form-item>

                    <el-form-item label="出发时间：" prop="go_time">
                        <el-time-select v-model="traffic_Form.go_time" :picker-options="{start: '00:00',step: '00:01',end: '23:59'}" placeholder="选择出发时间" style="width: 90%;">
                        </el-time-select>
                    </el-form-item>

                    <el-form-item label="出发地点：" prop="go_place">
                        <el-input style="width: 90%;" placeholder="请输入出发地点" v-model="traffic_Form.go_place"></el-input>
                    </el-form-item>

                    <el-form-item label="到达时间：" prop="return_time">
                        <el-time-select v-model="traffic_Form.return_time" :picker-options="{start: '00:00',step: '00:01',end: '23:59'}" placeholder="选择到达时间" style="width: 90%;">
                        </el-time-select>
                    </el-form-item>

                    <el-form-item label="到达地点：" prop="return_place">
                        <el-input style="width: 90%;" placeholder="请输入到达地点" v-model="traffic_Form.return_place"></el-input>
                    </el-form-item>

                    <el-form-item label="行程时长：" prop="desc">
                        <el-input style="width: 90%;" placeholder="请输入行程时长" v-model="traffic_Form.desc"></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="traffic_dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitTraffic('traffic_Form')">确 定</el-button>
                </span>
            </el-dialog>
        </div>

        <!--第二页开始-->
        <div v-if="active === 1 " class="container">
            <!-- 行程管理 -->
            <el-card class="add_weekend_card">
                <el-row class="title">
                    <el-col>日活动管理</el-col>
                </el-row>
                <div class="content">
                    <el-row class="scheduling">
                        <el-col>
                            <span>行程安排:</span>
                            <el-button type="primary" @click="show_trip()">添加行程</el-button>
                        </el-col>
                    </el-row>
                    <!--行程列表-->
                    <div class="Trip" v-for="(item,index) in trip_list" :key="index">
                        <div class="table_title">
                            <div class="left">
                                <span>第{{ item.trip_day }}天</span>
                                <span>{{ item.trip_name }}</span>
                            </div>
                            <div class="right">
                                <span class="edit" style="cursor: pointer" @click="editTrip(index)">修改</span>
                                <span class="del" style="cursor: pointer" @click="delTrip(index)">删除</span>
                            </div>
                        </div>
                        <!--行程标签开始-->
                        <div class="trip-container">
                            <el-row class="trip-tr" :gutter="20">
                                <el-col class="trip-th" :span="2">行程标签</el-col>
                                <el-col class="trip-td" :span="22">行程内容</el-col>
                            </el-row>
                            <el-row class="trip-tr" :gutter="20" v-for="v in (item.trip_label)" :key="v.label">
                                <el-col class="trip-th" :span="2">{{ v.label }}</el-col>
                                <el-col class="trip-td" :span="22">{{ v.label_content }}</el-col>
                            </el-row>
                        </div>
                        <!--行程标签结束-->
                    </div>
                </div>
            </el-card>

            <!-- 添加行程 -->
            <el-dialog close="el-dialog" title="添加行程" :visible.sync="trip_dialogVisible" width="40%" :before-close="close_trip">
                <!-- 分割线 -->
                <div class="day">第{{ trip_day }}天</div>
                <!-- 表单 -->
                <el-form class="Add_itinerary">
                    <el-form-item label="行程名称：">
                        <div class="Trip_name_box">
                            <el-input size="small" v-model=" trip_name " placeholder="请输入行程名称">
                            </el-input>

                            <el-button class="add_trip_tag" type="primary" @click="showTripLabel">添加行程标签组</el-button>
                        </div>
                    </el-form-item>

                    <div v-for="(item,index) in trip_label" :key="index">
                        <el-form-item label="行程标签：">
                            <el-input size="small" style="width: 170px;" v-model="item.label" placeholder="请输入行程标签"></el-input>
                            <el-button type="danger" icon="el-icon-delete" v-if="index !== 0" size="small" @click="delTripLabel(index)">删除标签组
                            </el-button>
                        </el-form-item>

                        <el-form-item label="行程内容：">
                            <el-input type="textarea" rows="6" class="trip_detail" v-model="item.label_content" placeholder="请输入行程内容"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="close_trip()">取 消</el-button>
                    <el-button type="primary" @click="over_trip()">确 定</el-button>
                </span>
            </el-dialog>
        </div>

        <!--第三页开始-->
        <div v-if="active === 2" class="container">
            <el-card class="add_weekend_card">
                <!-- title -->
                <el-row class="title">
                    <el-col :span='22'>基本信息</el-col>

                    <!--<el-col :span="2">-->
                    <!--<el-button type="primary" @click="batch_show = true">批量设置</el-button>-->
                    <!--</el-col>-->
                </el-row>

                <!-- 批量设置弹窗开始 -->
                <el-dialog close="add_weekend_dialog" title="添加期数" :visible.sync="batch_show" width="40%" :before-close="handleClose">
                    <!-- 表单 -->
                    <el-form class="batch_form" label-width="100px">
                        <el-form-item label="上传时间：" prop="region">
                            <el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="选择星期：" prop="name">
                            <div class="select_week">
                                <el-checkbox v-model="checked">星期一</el-checkbox>
                                <el-checkbox v-model="checked">星期二</el-checkbox>
                                <el-checkbox v-model="checked">星期三</el-checkbox>
                                <el-checkbox v-model="checked">星期四</el-checkbox>
                                <el-checkbox v-model="checked">星期五</el-checkbox>
                                <el-checkbox v-model="checked">星期六</el-checkbox>
                                <el-checkbox v-model="checked">星期日</el-checkbox>
                            </div>
                        </el-form-item>

                        <el-form-item label="成人价格：" prop="name">
                            <el-row :gutter="10" class="adult_price">
                                <el-col :span="9">
                                    <el-input></el-input>
                                </el-col>

                                <el-col tag="span" :span="2">
                                    <span class="text_span">元</span>
                                </el-col>

                                <el-col :span="6">
                                    <el-input></el-input>
                                </el-col>

                                <el-col :span="2">
                                    <span class="text_span">人</span>
                                </el-col>
                            </el-row>

                        </el-form-item>

                        <el-form-item label="儿童价格：" prop="name">
                            <el-row>
                                <el-radio v-model="radio" label="1">开启</el-radio>
                                <el-radio v-model="radio" label="2">关闭</el-radio>
                            </el-row>

                            <el-row style="padding-left: 4px;" :gutter="10" class="adult_price">
                                <el-col :span="9">
                                    <el-input></el-input>
                                </el-col>

                                <el-col tag="span" :span="2">
                                    <span class="text_span">元</span>
                                </el-col>

                                <el-col :span="6">
                                    <el-input></el-input>
                                </el-col>

                                <el-col :span="2">
                                    <span class="text_span">人</span>
                                </el-col>
                            </el-row>
                        </el-form-item>

                        <el-form-item label="单房价格：" prop="status">
                            <el-row :gutter="10">
                                <el-col :span="15">
                                    <el-input></el-input>
                                </el-col>
                                <el-col :span="1">
                                    <span>元</span>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="batch_show = false">取消</el-button>
                        <el-button type="primary" @click="batch_show = false">提交</el-button>
                    </span>
                </el-dialog>
                <!--批量设置弹窗结束-->

                <!-- 单个设置弹窗开始 -->
                <el-dialog close="add_weekend_dialog" title="设置价格及库存" :visible.sync="setOne" width="40%" :before-close="setOneClose">
                    <!-- 表单 -->
                    <el-form class="batch_form" label-width="100px">
                        <el-form-item label="成人价格：" prop="name">
                            <el-row :gutter="10" class="adult_price">
                                <el-col :span="9">
                                    <el-input placeholder="请输入成人价格" v-model="oneData.one_adult_price"></el-input>
                                </el-col>

                                <el-col tag="span" :span="2">
                                    <span class="text_span">元</span>
                                </el-col>

                                <el-col :span="6">
                                    <el-input placeholder="请输入成人库存" v-model="oneData.one_adult_stock"></el-input>
                                </el-col>

                                <el-col :span="2">
                                    <span class="text_span">人</span>
                                </el-col>
                            </el-row>

                        </el-form-item>

                        <el-form-item label="儿童价格：">
                            <el-row>
                                <el-radio v-model="oneData.radio_one" label="1">开启</el-radio>
                                <el-radio v-model="oneData.radio_one" label="2">关闭</el-radio>
                            </el-row>

                            <el-row style="padding-left: 4px;" :gutter="10" class="adult_price" v-if="oneData.radio_one === '1'">
                                <el-col :span="9">
                                    <el-input placeholder="请输入儿童价格" v-model="oneData.one_child_price"></el-input>
                                </el-col>

                                <el-col tag="span" :span="2">
                                    <span class="text_span">元</span>
                                </el-col>

                                <el-col :span="6">
                                    <el-input placeholder="请输入儿童库存" v-model="oneData.one_child_stock"></el-input>
                                </el-col>

                                <el-col :span="2">
                                    <span class="text_span">人</span>
                                </el-col>
                            </el-row>
                        </el-form-item>

                        <el-form-item label="单房价格：" prop="status">
                            <el-row :gutter="10">
                                <el-col :span="15">
                                    <el-input placeholder="请输入单房差价格" v-model="oneData.one_room_price"></el-input>
                                </el-col>
                                <el-col :span="1">
                                    <span>元</span>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="setOneClose">取消</el-button>
                        <el-button type="primary" @click="setOneOver">提交</el-button>
                    </span>
                </el-dialog>
                <!--单个设置弹窗结束-->

                <!-- 主体内容 -->
                <div :class="['content', empytGrids.length >= 6 ? 'h_1700' : 'h_1450']">
                    <div class="my_table">
                        <!-- 当前第几月 -->
                        <div class="header">
                            <img src="http://p5o5m4a9h.bkt.clouddn.com/arrow/left.png" class="img" alt="" @click="lastMonth">
                            <span>{{ cur_year }}年{{ cur_month }}月</span>
                            <img src="http://p5o5m4a9h.bkt.clouddn.com/arrow/left.png" class="img-right" alt="" @click="nextMonths">
                        </div>
                        <!-- 星期 -->
                        <div class="week">
                            <div class="item" v-for="(item, i) in week" :key="i">{{item}}</div>
                        </div>
                        <!--星期结束-->

                        <!-- 日历开始 -->
                        <div class="day">
                            <!--日期前的空格-->
                            <div class="item" v-if="hasEmptyGrid" v-for="item in empytGrids" :key="item.id">
                            </div>
                            <!--空格结束-->

                            <!--每天开始-->
                            <div class="item" v-for="(item,index) in days" :key="item.day" @click="setOneOpen(index)" style="cursor: pointer">
                                <div class="inner_item">
                                    <div class="num">{{ item.day }}</div>
                                    <div class="price">
                                        <div class="k">
                                            <span>成人价</span>
                                        </div>
                                        <input class="val" type="text" disabled v-model="item.adult_price">
                                    </div>
                                    <div class="price">
                                        <div class="k">
                                            <span>库存</span>
                                        </div>
                                        <input class="val" type="text" disabled v-model="item.adult_stock">
                                    </div>
                                    <div class="price">
                                        <div class="k">
                                            <span>儿童价</span>
                                        </div>
                                        <input class="val" type="text" disabled v-model="item.child_price">
                                    </div>
                                    <div class="price">
                                        <div class="k">
                                            <span>库存</span>
                                        </div>
                                        <input class="val" type="text" disabled v-model="item.child_stock">
                                    </div>
                                    <div class="price">
                                        <div class="k">
                                            <span>单房差</span>
                                        </div>
                                        <input class="val" type="text" disabled v-model="item.room_price">
                                    </div>
                                </div>
                            </div>
                            <!--每天结束-->
                        </div>
                        <!--日历结束-->
                    </div>
                </div>
            </el-card>
        </div>

    </div>

</template>
<script src='../../../static/js/weekend/add_weekend_list.js'></script>

<style scoped>
@import "../../../static/css/weekend/add_weekend_list.css";
</style>


